<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <!--v-bind缩写 :  -->
    <Parent :title="msg1" />
    <A :list="list" @changeParentName="getChildValue" />
    <h2>{{name}}</h2>
     <B v-bind:title2="msg2" />
  </div>
</template>

<script>
// @ is an alias to /src
import Parent from "@/components/Parent";
import A from "@/components/A";
import B from "@/components/B"

export default {
  name: "Home",
  components: {
    Parent,
    A,
    B
  },
  data(){
    return{
      name:'这是一个默认值',
      msg1:'我是框剑锋111,我是父组件传递给子组件的值',
      msg2:'我是框剑锋222,我是父组件传递给子组件的值',
      list:[
        {"id":"1","name":"test1"},
        {"id":"2","name":"test2"},
        {"id":"3","name":"test3"},
      ]
    }
  },
  methods:{
    getChildValue(name){
      this.name = name;
    }
  }
};
</script>
